<template>

  <div>
    <div>
      <el-button type="text" @click="createprojectflag = true">新增数据库</el-button>

      <el-dialog title="新增项目" :visible.sync="createprojectflag">
        <el-form :model="newProject"  refs="dbForm" >

          <el-form-item label="项目名" :label-width="formLabelWidth">


            <el-input v-model="newProject.name" autocomplete="off"></el-input>

          </el-form-item>



        </el-form>
        <div slot="footer" class="dialog-footer">

          <el-button @click="createprojectflag = false">取 消</el-button>

          <el-button type="primary" @click="saveNewProject">确 定</el-button>
        </div>
      </el-dialog>

    </div>

    <div>


      <el-dialog title="修改项目" :visible.sync="updateProjectflag">
        <el-form :model="updateProject"  refs="dbForm" >

          <el-form-item label="项目名" :label-width="formLabelWidth">


            <el-input v-model="updateProject.name" autocomplete="off"></el-input>

          </el-form-item>



        </el-form>
        <div slot="footer" class="dialog-footer">

          <el-button @click="updateProjectflag = false">取 消</el-button>

          <el-button type="primary" @click="updatePro">确 定</el-button>
        </div>
      </el-dialog>

    </div>



    <div>
      <el-table :data="projects">

        <el-table-column
          prop="id"
          label="id"
        ></el-table-column>

        <el-table-column
          prop="name"
          label="名称"
        ></el-table-column>

        <el-table-column label="confirm">
          <template slot-scope="{row,index}">
            <!-- <span v-show="!row.editable" @dblclick="edit(row,index)">{{row.executor}}</span>
             <el-input v-show="row.editable"  v-model="row.executor.toString()"  ></el-input>-->

            <el-button type="primary" size="mini" @click="updateFlag(row,index)" >修改</el-button>
          </template>
        </el-table-column>


      </el-table>


    </div>



  </div>
    
</template>

<script>
  import {getProject,saveproject,updateproject} from '../../api/shuzhiCompare'


    export default {
        name: "project",
        data(){
          return{
            projects:[],
            updateProjectflag:false,
            createprojectflag:false,
            formLabelWidth:'150px',
            newProject:{
              id:0,
              name:'',
              status:1
            },
            updateProject:{
              id:0,
              name:'',
              status:1
            }

          }
        },
      methods:{

        updateFlag(row,index){
          console.log(row)
          console.log(index)
          this.updateProject = row
          console.log(this.projects[index])
          this.updateProjectflag=true

        },
        updatePro(){
          let that = this
          updateproject(this.updateProject).then(res=>{
            that.updateProjectflag=false
            that.getProjects()
          })
        },



        getProjects(){

          getProject().then(res=>{
            this.projects = res.data
            this.$store.dispatch("setProjects",res.data)

          }).catch(err=>{
            this.warn(err.data)
          })
        },
        saveNewProject(){
         let  that = this
          saveproject(this.newProject).then(res=>{
            that.createprojectflag = false
            that.getProjects()
          }).catch(err=>{

          })
        },
        warn(message) {
          this.$alert(message, '标题名称', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'info',
                message: `action: ${ action }`
              });
            }
          });
        },
      },
      mounted(){
          this.getProjects()

      }
    }
</script>

<style scoped>

</style>
